<template>
  <div class="container">
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark">
          <div class="s-box">
            <div class="big-pic">
              <img src="../assets/Verification/big-logo.png" alt="">
            </div>
            <div class="wen">
              <div class="tip1">专业好用的人事管理系统</div>
              <div class="line"></div>
              <div class="tip2">
                SPF-Pal是一个为企业提供人事管理Saas平台，高效便捷的系统操作，
                让企业管理更精细化，提升企业运营效率和管理效能
              </div>
            </div>
            <div class="login-box">
              <div class="loginpic">
                <img src="../assets/Verification/pal  logo.png" alt="">
              </div>
              <div class="tit">欢迎登录SPF-Pal平台</div>
              <el-form :model="loginForm" ref="loginFormRef" label-width="0px" class="login_form">
                <!-- 用户名  prop给定验证规则-->
                <el-form-item prop="username" class="user">
                  <el-input placeholder="请输入账号" v-model="loginForm.username" value="loginForm.username"
                    prefix-icon="iconfont icon-user">
                  </el-input>
                </el-form-item>
                <!-- 密码 -->
                <el-form-item prop="password" class="password">
                  <el-input placeholder="请输入密码" v-model="loginForm.password" value="loginForm.password"
                    prefix-icon="iconfont icon-3702mima" type="password"></el-input>
                </el-form-item>
                <!-- 滑块结构start -->
                <el-form-item>
                  <div class="form-inline-input">
                    <div class="code-box" id="code-box">
                      <input type="text" name="code" class="code-input" />
                      <p></p>
                      <span style="font-size: 10px">|||</span>
                    </div>
                  </div>
                </el-form-item>
                <!-- 滑块结构 -->
                <!-- 单选块start -->
                <div class="tip3">
                  <el-form-item>
                    <el-checkbox class="checked" v-model="checked">记住密码</el-checkbox>
                  </el-form-item>
                  <el-link :underline="false" class="forget" @click="gotomima">忘记密码?</el-link>
                </div>
                <!-- 单选框end -->
                <!-- 按钮区域 -->
                <el-form-item>
                  <el-button class="btns" type="primary" @click="login">登录</el-button>
                </el-form-item>
                <el-link :underline="false" class="zhuc" @click='gotozhuce'>免费注册</el-link>
              </el-form>
            </div>
          </div>
        </div>
      </el-col>
    </el-row>
    <el-row>
      <el-col :span="24">
        <div class="grid-content bg-purple-dark bg-bom">
          <div class="by">
            <img src="../assets/Verification/rang-bg.png" alt="">
          </div>
        </div>
      </el-col>
      <el-divider class="jies">企业简介</el-divider>
      <div class="jies1">
        SEEBON仕邦集团旗下广州仕邦人力资源有限公司是国内首先引进国外人力资源行业先进经验，第一规模的人力资源外包服务企业，拥有62家分支机构，
        遍布300多个大中城市。为金融，IT高科技、物流和零售服务等行业提供顾问式服务和系统平台，其中派遣和代理人员30余万。
      </div>
    </el-row>
  </div>
</template>
<script>
export default {
  data() {
    return {
      form: {
        type: ''
      },
      loginForm: {
        username: '',
        password: '',
        stamp: '1571754142000'
      },
      //loginFormRules表单的验证规则对象
      // loginFormRules: {
      //   username: [
      //     { required: true, message: '请输入用户名称', trigger: 'blur' },
      //     { min: 3, max: 15, message: '长度在 3 到 15 个字符', trigger: 'blur' }
      //   ],
      //   password: [
      //     { required: true, message: '请输入登录密码', trigger: 'blur' },
      //     {
      //       min: 2,
      //       max: 35,
      //       message: '长度在 2 到35 个字符',
      //       trigger: 'blur'
      //     }
      //   ]
      // },
      menulist: [],
      checked: false,
      str:''
    }
  },
  mounted() {
    var _this = this
    // window.addEventListener('load',function(){
    //code是后台传入的验证字符串
    var code = 'jsaidaisd656',
      codeFn = new _this.moveCode(code, _this)
    this.getCookie()
    // });
  },
  created() {
    this.str=this.getRandom()
    console.log(this.str)
  },
  methods: {
    //滑块验证的方法start
    getOffset(box, direction) {
      var setDirection = direction == 'top' ? 'offsetTop' : 'offsetLeft'
      var offset = box[setDirection]
      var parentBox = box.offsetParent
      while (parentBox) {
        offset += parentBox[setDirection]
        parentBox = parentBox.offsetParent
      }
      parentBox = null
      return parseInt(offset)
    },
    moveCode(code, _this) {
      var fn = { codeVluae: code }
      var box = document.querySelector('#code-box'),
        progress = box.querySelector('p'),
        codeInput = box.querySelector('.code-input'),
        evenBox = box.querySelector('span')
      //默认事件
      var boxEven = ['mousedown', 'mousemove', 'mouseup']
      //改变手机端与pc事件类型
      if (typeof document.ontouchstart == 'object') {
        boxEven = ['touchstart', 'touchmove', 'touchend']
      }
      var goX, offsetLeft, deviation, evenWidth, endX
      function moveFn(e) {
        e.preventDefault()
        e = boxEven['0'] == 'touchstart' ? e.touches[0] : e || window.event
        endX = e.clientX - goX
        endX = endX > 0 ? (endX > evenWidth ? evenWidth : endX) : 0
        if (endX > evenWidth * 0.7) {
          progress.innerText = '松开验证'
          progress.style.backgroundColor = '#66CC66'
        } else {
          progress.innerText = ''
          progress.style.backgroundColor = '#FFFF99'
        }
        progress.style.width = endX + deviation + 'px'
        evenBox.style.left = endX + 'px'
      }
      function removeFn() {
        document.removeEventListener(boxEven['2'], removeFn, false)
        document.removeEventListener(boxEven['1'], moveFn, false)
        if (endX > evenWidth * 0.7) {
          progress.innerText = '验证成功'
          progress.style.width = evenWidth + deviation + 'px'
          evenBox.style.left = evenWidth + 'px'
          codeInput.value = fn.codeVluae
          evenBox.onmousedown = null
          // _this.ruleForm.verification = true
        } else {
          progress.style.width = '0px'
          evenBox.style.left = '0px'
        }
      }
      function getOffset(box, direction) {
        var setDirection = direction == 'top' ? 'offsetTop' : 'offsetLeft'
        var offset = box[setDirection]
        var parentBox = box.offsetParent
        while (parentBox) {
          offset += parentBox[setDirection]
          parentBox = parentBox.offsetParent
        }
        parentBox = null
        return parseInt(offset)
      }
      evenBox.addEventListener(
        boxEven['0'],
        function(e) {
          e = boxEven['0'] == 'touchstart' ? e.touches[0] : e || window.event
          ;(goX = e.clientX),
            (offsetLeft = getOffset(box, 'left')),
            (deviation = this.clientWidth),
            (evenWidth = box.clientWidth - deviation),
            endX
          document.addEventListener(boxEven['1'], moveFn, false)
          document.addEventListener(boxEven['2'], removeFn, false)
        },
        false
      )
      fn.setCode = function(code) {
        if (code) fn.codeVluae = code
      }
      fn.getCode = function() {
        return fn.codeVluae
      }
      fn.resetCode = function() {
        evenBox.removeAttribute('style')
        progress.removeAttribute('style')
        codeInput.value = ''
      }
      return fn
    },

    //滑块验证的方法end
    resetLoginForm111() {
      this.$router.push('/register')
    },

    async login() {
      var username = this.loginForm.username
      var password = this.loginForm.password
      if(username==''||username==null){
        this.$message.warning('请输入账号！')
        return;
      }else if(password==''||password==null){
        this.$message.warning('请输入密码！')
        return;
      }

      let loginForm = this.loginForm
      if (this.checked == true) {
        window.localStorage.setItem('name', loginForm.username)
        window.localStorage.setItem('word', loginForm.password)
      }
      let Base64 = require('js-base64').Base64
      loginForm.password = Base64.encode(
        this.loginForm.password + '[' + this.str + ']'
      )

      this.loginForm = {
        userName: loginForm.username,
        password: loginForm.password,
        stamp: this.str
        // stamp: '1571754142000'
      }

      // this.loginForm = {
      //   userName: '1011569',
      //   password: 'MTIzNDU2WzE1NzE3NTQxNDIwMDBd',
      //   stamp: '1571754142000'
      // }
      const { data: res } = await this.$http.post('login', this.loginForm)
      console.log(res.status)
      this.loginForm.password=''
      if (res.status !==1) return this.$message.error('登录失败')
      this.$message.success('登录成功')
      //存储token 到浏览器
      console.log(res.token)
      window.sessionStorage.setItem('token', res.token)

      this.$router.push('/index')
    },

    gotomima() {
      this.$router.push('/verification1')
    },
    gotozhuce() {
      this.$router.push('/registersetp1')
    },

    //读取cookie
    getCookie() {
      let username = window.localStorage.getItem('name')
      let password = window.localStorage.getItem('word')
      console.log(username, password)
      this.loginForm.username = username
      this.loginForm.password = password
    },
    getRandom(){
      let str=""
      for(var i=0;i<11;i++) {
        str+= Math.floor(Math.random()*10);
      }
      console.log(str)
      return str
    }
  }
}
// 滑块行为
</script>
<style lang="less" scoped>
.s-box {
  position: relative;
  .tip1 {
    position: absolute;
    left: 20%;
    top: 338px;
    height: 17px;
    font-size: 18px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(28, 176, 255, 1);
    line-height: 14px;
  }
  .line {
    position: absolute;
    left: 20%;
    top: 369px;
    width: 294px;
    height: 1px;
    background: rgba(2, 155, 255, 1);
  }
  .tip2 {
    position: absolute;
    left: 20%;
    top: 375px;
    width: 365px;
    height: 29px;
    font-size: 12px;
    font-family: Adobe Heiti Std;
    font-weight: normal;
    color: rgba(28, 176, 255, 1);
    line-height: 17px;
  }
  .login-box {
    position: relative;
    width: 371px;
    height: 375px;
    background: rgba(255, 255, 255, 1);
    box-shadow: 1px 2px 2px 2px #ccc;
    border-radius: 6px;
    top: -150px;
    margin: auto;
    .loginpic {
      margin: auto;
      padding: 20px;
      width: 178px;
      height: 42px;
    }
    .tit {
      margin: auto;
      width: 178px;
      height: 17px;
      font-size: 18px;
      font-family: Adobe Heiti Std;
      font-weight: normal;
      color: rgba(102, 102, 102, 1);
      line-height: 20px;
    }
  }
}
.big-pic {
  margin: auto;
  margin-top: 50px;
  width: 775px;
  height: 415px;
  border: 1px dashed #ccc;
  img {
    width: 100%;
    height: 100%;
  }
}
/* 滑块样式 */

.form-inline-input {
  border: none;
  border-radius: 15px;
  margin-bottom: -30px;
  height: 27px;
}
.form-inline-input input,
.code-box {
  padding: 0 3px;
  width: 315px;
  height: 27px;
  line-height: 27px;
  color: #fff;
  background: #fff;
  border: 0;
  border-radius: 15px;
  outline: none;
  font-size: 10px;
}
.code-box {
  position: relative;
}
.code-box p,
.code-box span {
  display: block;
  position: absolute;
  left: 0;
  height: 27px;
  text-align: center;
  line-height: 27px;
  border-radius: 5px;
  padding: 0;
  margin: 0;
}
.code-box span {
  width: 40px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  margin-right: 1px;
  border: 1px solid #ccc;
  border-radius: 10px;
}
.code-box p {
  width: 0;
  overflow: hidden;
  text-indent: -20px;
  transition: background 1s ease-in;
}
.code-box .code-input {
  display: none;
}
.code-box .code-input {
  display: none;
}

.form-inline-input {
  border-radius: 5px;
}
.form-inline-input input,
.code-box {
  padding: 0 3px;
  width: 292px;
  margin-left: 34px;
  height: 27px;
  color: #fff;
  text-shadow: 1px 1px 1px black;
  background: #efefef;
  border: 0;
  border-radius: 5px;
  outline: none;
}
.code-box {
  position: relative;
}
.code-box p,
.code-box span {
  display: block;
  position: absolute;
  left: 0;
  height: 27px;
  text-align: center;
  line-height: 27px;
  border-radius: 5px;
  padding: 0;
  margin: 0;
}
.code-box span {
  width: 40px;
  background-color: #fff;
  font-size: 16px;
  cursor: pointer;
  margin-right: 1px;
}
.code-box p {
  width: 0;
  overflow: hidden;
  text-indent: -20px;
  transition: background 1s ease-in;
}
.code-box .code-input {
  display: none;
}
.code-box .code-input {
  display: none;
}
.login_form {
  margin-top: 10px;
}
.el-input {
  position: relative;
  font-size: 14px;
  display: inline-block;
  width: 80%;
  margin: auto;
  margin-left: 37px;
}
.tip3 {
  // background-color: pink;
  height: 40px;
}
.checked {
  margin-top: 5px;
  margin-left: 32px;
}
.forget {
  margin-top: -112px;
  margin-left: 262px;
  color: #00a2ff !important;
}
.btns {
  width: 83%;
  margin-left: 30px;
}
.zhuc {
  margin: auto;
  margin-top: -30px;
  width: 100%;
  color: #00a2ff !important;
}
.bg-bom {
  width: 100%;
  height: 461px;
  position: absolute;
  z-index: -32;
  top: -270px;
  background: linear-gradient(
    0deg,
    rgba(0, 153, 255, 1),
    rgba(86, 225, 255, 1)
  );
  .by {
    width: 482px;
    height: 45px;
    margin: auto;
    margin-top: 100px;
  }
}
.el-divider {
  position: relative;
  top: -50px;
  width: 400px;
  margin: auto;
}
.el-divider__text {
  position: absolute;
  background-color: transparent;
  padding: 0 20px;
  font-weight: 500;
  color: #fff;
  font-size: 18px;
}
.jies1 {
  width: 1073px;
  margin: auto;
  color: #fff;
}
</style>
